<template>
  <div class="container">
    <!-- <h3>标题的点点滴滴</h3> -->
    <!-- 卡片 -->
    <el-card>
      <!-- 标题 -->
      <div
        slot="header"
        class="clearfix"
        v-if="this.$route.query.editname == undefined"
      >
        <span>试题录入</span>
      </div>
      <div slot="header" class="clearfix" v-else>
        <span>试题修改</span>
      </div>
      <el-form
        :model="addTest"
        :rules="addTestRules"
        ref="addTestRef"
        label-width="100px"
        label-position="left"
      >
        <!-- 学科 -->
        <el-form-item label="学科:" prop="subjectID">
          <el-select
            v-model="addTest.subjectID"
            placeholder="请选择"
            class="el-select-width"
            @change="getsubject"
          >
            <el-option
              v-for="(item, index) in subjectlist"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录     @change="hebin"-->
        <el-form-item label="目录:" prop="catalogID">
          <el-select
            v-model="addTest.catalogID"
            placeholder="请选择"
            class="el-select-width"
          >
            <el-option
              v-for="(item, index) in cataloglist"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 企业 -->
        <el-form-item label="企业:" prop="enterpriseID">
          <el-select
            v-model="addTest.enterpriseID"
            placeholder="请选择"
            class="el-select-width"
          >
            <el-option
              v-for="(item, index) in enterpriselist"
              :key="index"
              :label="item.company"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 地址 -->
        <el-form-item label="城市:" required label-width="100px" prop="city">
          <el-row :gutter="5">
            <el-col :span="6">
              <!-- 省会 -->
              <el-select
                v-model="addTest.province"
                placeholder="请选择"
                @change="getcity"
                class="el-select-marge"
              >
                <el-option
                  v-for="(item, index) in provincelist"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
            <!-- 城市 -->
            <el-col :span="7">
              <!-- 城市 -->
              <el-select
                v-model="addTest.city"
                placeholder="请选择"
                class="el-input-width"
              >
                <el-option
                  v-for="(item, index) in citylist"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 方向 -->
        <el-form-item label="方向:" prop="direction">
          <el-select
            v-model="addTest.direction"
            placeholder="请选择"
            class="el-select-width"
          >
            <el-option
              v-for="(item, index) in directionlist"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 题型 -->
        <el-form-item label="题型:" prop="questionType">
          <el-radio-group v-model="addTest.questionType">
            <el-radio
              v-for="(item, index) in questionTypelist"
              :key="index"
              :label="item.value + ''"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item label="题型:" prop="difficulty">
          <el-radio-group v-model="addTest.difficulty">
            <el-radio
              v-for="(item, index) in difficultylist"
              :key="index"
              :label="item.value + ''"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item label="题型:" prop="question">
          <quill-editor v-model="addTest.question" :options="editorOption">
          </quill-editor>
        </el-form-item>

        <!-- 选项 -->
        <!-- 单选 -->
        <el-form-item label="选项：" v-if="addTest.questionType === '1'">
          <el-row
            :gutter="20"
            v-for="(item, index) in addTest.options"
            :key="index"
            class="col-left col"
          >
            <el-col :span="1">
              <el-radio-group v-model="item.isRight">
                <el-radio :label="1" @change="handle(item)">{{
                  item.code + ":"
                }}</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="6">
              <el-input v-model="item.title"></el-input>
            </el-col>
            <el-col :span="6" class="col-left">
              <el-upload
                :action="UpURL"
                list-type="picture-card"
                :headers="headerObj"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
              >
                <i class="el-icon-circle-close erroricon"></i>
                <span>上传图片</span>
              </el-upload>
            </el-col>
          </el-row>
          <el-button type="danger" @click="addDomain" disabled
            >+增加选项与答案</el-button
          >
        </el-form-item>

        <!-- 多选 -->
        <el-form-item label="选项：" v-else-if="addTest.questionType === '2'">
          <el-row
            :gutter="20"
            v-for="(item, index) in addTest.options"
            :key="index"
            class="col-left col"
          >
            <el-col :span="1">
              <el-checkbox
                :checked="item.isRight == 1"
                v-model="code2"
                :label="item.code"
                @change="handleD"
                >{{ item.code + ":" }}</el-checkbox
              >
            </el-col>
            <el-col :span="6">
              <el-input v-model="item.title"></el-input>
            </el-col>
            <el-col :span="6" class="col-left">
              <el-upload
                :action="UpURL"
                list-type="picture-card"
                :headers="headerObj"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
              >
                <i class="el-icon-circle-close erroricon"></i>
                <span>上传图片</span>
              </el-upload>
            </el-col>
          </el-row>
          <el-button type="danger" @click="addDomain"
            >+增加选项与答案</el-button
          >
        </el-form-item>
        <!-- ;; -->

        <!-- 解析视频 -->
        <el-form-item label="解析视频：" label-width="100px">
          <el-input
            v-model="addTest.videoURL"
            class="el-select-width"
          ></el-input>
        </el-form-item>

        <!-- 答案解析 -->
        <el-form-item label="答案解析:" prop="answer">
          <quill-editor v-model="addTest.answer" :options="editorOption">
          </quill-editor>
        </el-form-item>

        <!-- 题目备注 -->
        <el-form-item label="题目备注">
          <el-input
            type="textarea"
            v-model="addTest.remarks"
            class="el-textarea"
          ></el-input>
        </el-form-item>

        <!--试题标签  -->
        <el-form-item label="试题标签:">
          <el-select
            v-model="tagss"
            placeholder="请选择"
            class="el-select-width"
            multiple
            @change="hhh"
          >
            <el-option
              v-for="(item, index) in tagslist"
              :key="index"
              :label="item.tagName"
              :value="item.tagName"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 添加按钮 -->
        <el-form-item v-if="this.$route.query.editname == undefined">
          <el-button type="primary" @click="onSubmit">确认提交</el-button>
        </el-form-item>
        <!-- 修改按钮 -->
        <el-form-item v-else>
          <el-button type="primary" @click="editSubmit">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 请求头
import { getToken } from "@/utils/auth";

// 目录
import {
  list as catalogs,
  simple as simplecatalogs,
} from "../../api/hmmm/directorys";
// 学科
import {
  list as subjects,
  simple as subjectssubjects,
} from "../../api/hmmm/subjects";
// 企业
import { list as enterprises } from "../../api/hmmm/companys";
// 省份，城市
import { provinces, citys } from "../../api/hmmm/citys";
// 方向，题型,难度
import { direction, questionType, difficulty } from "../../api/hmmm/constants";
// 标签
import { list as tags, simple as simpletags } from "../../api/hmmm/tags";
// 基础题库添加
import { add, update, detail } from "../../api/hmmm/questions";

export default {
  name: "questionsNew",
  data() {
    return {
      // 信息信息
      detailslist: [],
      // copy
      copylist: {
        // 学科
        subjectID: "",
        // 目录
        catalogID: "",
        // 企业
        enterpriseID: "",
        // 省份
        province: "",
        // 城市
        city: "",
        // 方向
        direction: "",
        // 题型
        questionType: "1",
        // 难度
        difficulty: "1",
        //题干
        question: "",
        // 选项
        options: [
          {
            isRight: 0,
            code: "A",
            img: "",
            title: "",
          },
          {
            isRight: 0,
            code: "B",
            img: "",
            title: "",
          },
          {
            isRight: 0,
            code: "C",
            img: "",
            title: "",
          },
          {
            isRight: 0,
            code: "D",
            img: "",
            title: "",
          },
        ],
        // 解析视频
        videoURL: "",
        // 答案解析
        answer: "",
        // 题目备注
        remarks: "",
        // 试题标签
        tags: "",
      },
      // subjectID: "1",
      // 跳转页面的name
      jumpname: "undefined",
      // 简答
      message: "",
      // 学科
      subjectlist: [],
      // 目录
      cataloglist: [],
      // 企业
      enterpriselist: [],
      // 省份
      provincelist: [],
      // 城市
      citylist: [],
      // 方向
      directionlist: [],
      // 题型
      questionTypelist: [],
      // 难度
      difficultylist: [],
      // 标签
      tagslist: [],
      // 表单提交参数
      addTest: {
        // 学科
        subjectID: "",
        // 目录
        catalogID: "",
        // 企业
        enterpriseID: "",
        // 省份
        province: "",
        // 城市
        city: "",
        // 方向
        direction: "",
        // 题型
        questionType: "1",
        // 难度
        difficulty: "1",
        //题干
        question: "",
        // 选项
        options: [
          {
            isRight: 0,
            code: "A",
            img: "",
            title: "",
          },
          {
            isRight: 0,
            code: "B",
            img: "",
            title: "",
          },
          {
            isRight: 0,
            code: "C",
            img: "",
            title: "",
          },
          {
            isRight: 0,
            code: "D",
            img: "",
            title: "",
          },
        ],
        // 解析视频
        videoURL: "",
        // 答案解析
        answer: "",
        // 题目备注
        remarks: "",
        // 试题标签
        tags: "",
      },
      // tags
      tagss: "",
      //单选 v-model
      code1: "",
      // 多选
      code2: [],
      // 表单验证
      addTestRules: {
        // 学科
        subjectID: [
          { required: true, message: "请选择学科", trigger: "change" },
        ],
        // 目录
        catalogID: [
          { required: true, message: "请选择目录", trigger: "change" },
        ],
        // 企业
        enterpriseID: [
          { required: true, message: "请选择企业", trigger: "change" },
        ],
        // 省
        province: [
          { required: true, message: "请选择城市", trigger: "change" },
        ],
        // 地址
        city: [{ required: true, message: "请选择地区", trigger: "change" }],
        // 方向
        direction: [
          { required: true, message: "请选择方向", trigger: "change" },
        ],
        // 题型
        questionType: [
          { required: true, message: "请选择题型", trigger: "change" },
        ],
        // 难度
        difficulty: [
          { required: true, message: "请选择难度", trigger: "change" },
        ],
        // 题干
        question: [{ required: true, message: "请填写题干", trigger: "blur" }],
        // 答案解析
        answer: [{ required: true, message: "请填答案解析", trigger: "blur" }],
      },
      // 富文本框设置
      editorOption: {
        placeholder: "",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ list: "ordered" }, { list: "bullet" }],
            ["blockquote"],
            ["code-block", "image", "link"],
          ],
        },
      },
      // 图片上地址
      UpURL: "https://jsonplaceholder.typicode.com/posts/",
      // 上传图片请求头
      headerObj: {
        Authorization: `Bearer ${getToken()}`,
      },
      // 接受adc
      letterArr: [],
    };
  },

  created() {
    this.getcatalogue();
  },
  methods: {
    async getcatalogue() {
      // console.log(this.$route.query.editname);
      console.log(this.$route.query.editid);

      // this.jumpname=this.$route.query.editname
      // this.jumpname=this.$route.query.edit
      if (this.$route.query.editname == undefined) {
        this.addTest = this.copylist;
        console.log(11);
      } else {
        const res = await detail({ id: this.$route.query.editid.id });
        this.detailslist = res.data;
        // console.log(this.detailslist);
        console.log(this.detailslist.options);
        this.jumpname = this.$route.query.editname;
        this.addTest = this.$route.query.editid;
        this.addTest.options = this.detailslist.options;
        this.addTest.province = this.detailslist.province;
        this.addTest.catalogID = this.detailslist.directoryName;
        // 目录
        try {
          const val = this.addTest.subjectID;
          console.log(val);
          const { data } = await simplecatalogs({ subjectID: val });
          console.log(data);
          this.cataloglist = data;
          console.log(this.cataloglist);
          // console.log(val);
        } catch (err) {
          console.log(err);
        }

        // 标签
        try {
          const value = this.addTest.subjectID;
          const { data } = await tags({ subjectID: value });
          this.tagslist = data.items;
          console.log(this.tagslist);
        } catch (err) {
          console.log(err);
        }
      }
      // console.log(this.$route.query.editname);
      //

      // 学科
      try {
        const { data: data1 } = await subjectssubjects();
        this.subjectlist = data1;
        // console.log(this.subjectlist);
      } catch (err) {
        console.log(err);
      }

      // 企业
      try {
        const { data: data2 } = await enterprises();
        this.enterpriselist = data2.items;
        // console.log(this.enterpriselist);
      } catch (err) {
        console.log(err);
      }

      // 城市
      this.provincelist = provinces();
      // console.log(this.provincelist);

      // 放向
      this.directionlist = direction;
      // console.log(this.directionlist);
      // 题型
      this.questionTypelist = questionType;
      // console.log(this.questionTypelist);
      // console.log(this.addTest.questionType);
      // 难度
      this.difficultylist = difficulty;
      // console.log(this.difficultylist);
      //  this.$route.query.editname=undefined
      // this.testdata='el-upload-list__item-name'
    },
    // 根据省会获取城市值
    getcity() {
      this.addTest.city = "";
      // 地区
      try {
        const name = this.addTest.province;
        this.citylist = citys(name);
        this.addTest.city = "";
        // console.log(this.citylist);
      } catch (err) {
        console.log(err);
      }
    },
    // 根据学科获取目录
    async getsubject() {
      // 目录
      try {
        const val = this.addTest.subjectID;
        console.log(val);
        const { data } = await simplecatalogs({ subjectID: val });
        console.log(data);
        this.cataloglist = data;
        console.log(this.cataloglist);
        // console.log(val);
      } catch (err) {
        console.log(err);
      }

      // 标签
      try {
        const value = this.addTest.subjectID;
        const { data } = await tags({ subjectID: value });
        this.tagslist = data.items;
        console.log(this.tagslist);
      } catch (err) {
        console.log(err);
      }
    },
    // 额外添加额外选项
    addDomain() {
      for (var i = 65, j = 0; i < 91; i++, j++) {
        this.letterArr[j] = String.fromCharCode(i);
      }
      // console.log(this.letterArr);

      this.addTest.options.push({
        code: this.letterArr[this.addTest.options.length],
        img: "",
        title: "",
        isRight: 0,
      });
    },
    // 监听图片上传成功的事件
    handleSuccess(response) {
      this.addTest.options.img = response.img;
    },
    //处理移除图片的操作
    handleRemove(file) {
      const picimg = file.response.data.img;
      const i = this.addTest.options.findIndex((x) => x.img === picimg);
      this.addTest.options[i].img = "";
    },
    // 单选change
    handle(val) {
      this.addTest.options.forEach((item) => {
        item.isRight = 0;
      });
      val.isRight = 1;
      // console.log(this.addTest.options);
    },
    // 多选change
    handleD(v) {
      console.log(this.code2);
      this.addTest.options.forEach((item) => {
        item.isRight = 0;
        for (let i = 0; i < this.code2.length; i++) {
          if (this.code2[i] === item.code) {
            item.isRight = 1;
          }
        }
      });
      // console.log(this.addTest.options);
    },
    // 添加
    onSubmit() {
      // console.log(this.addTest.message);
      // console.log(this.addTest.tags);
      // console.log(this.addTest.options);
      this.$refs.addTestRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请正确填写表格");
        try {
          await add(this.addTest);
          this.$router.push("/questions/list");
        } catch (err) {
          console.log(err);
        }
      });
      console.log(this.addTest.tags);
    },
    // 修改
    editSubmit() {
      this.addTest.catalogID = this.detailslist.catalogID;
      this.$refs.addTestRef.validate(async (valid) => {
        console.log(this.addTest);
        if (!valid) return this.$message.error("请正确填写表格");
        try {
          await update(this.addTest);
          if (this.jumpname == "questions") {
            this.$router.push("/questions/list");
          } else {
            this.$router.push("/questions/choice");
          }
        } catch (err) {
          console.log(err);
        }
      });
    },
    hhh() {
      this.addTest.tags = this.tagss[0];
      // console.log(this.addTest.tags);
      // console.log(typeof this.addTest.tags);
    },

    // async hebin() {
    //   const res = await detail({ id: this.$route.query.editid.id });
    //   this.detailslist = res.data;
    //   console.log(this.detailslist);
    //   console.log(this.detailslist.options);
    // },
  },
};
</script>

<style scoped lang='less'>
.el-card {
  margin: 0 10px;
}
.el-select-width {
  width: 460px;
}

.el-select-marge {
  margin-right: 10px;
}
.el-col-5 {
  width: 17.83333%;
}
.quill-editor {
  height: 200px;
  margin-bottom: 50px;
}
.container {
  height: 100%;
}
.col {
  margin-top: 25px;
  margin-bottom: 40px;
}
.col-left {
  display: flex;
  align-content: center;
  margin-left: 10px !important;
}

/deep/.el-upload--picture-card,
/deep/.el-upload-list__item {
  width: 100px;
  height: 80px;
  line-height: 80px;
  margin-top: -15px;
}

.erroricon {
  position: absolute;
  left: 380px;
  top: -25px;
  font-size: 20px;
}

.el-textarea {
  width: 460px;
  height: 120px;
}
/deep/.el-textarea__inner {
  height: 110px !important;
}
/deep/ .el-form-item__content {
  width: 933px;
}
</style>